<!doctype html>
<html lang="zh-CN">

  <head>
    <!-- 必须的 meta 标签 -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap 的 CSS 文件 -->
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/font-awesome.min.css">
    <link rel="stylesheet" href="css/fonts/fontawesome-webfont.woff">
    <link rel="stylesheet" href="css/fonts/fontawesome-webfont.woff2">

    <title>交大「江湖令」</title>

    <style>
      html {
        height: 100%;
      }

      body {
        /*background-color:#FFFFFF;*/
        margin: 0;
        height:100%;
        overflow:hidden;
        background:#b7eee2;
      }

      canvas{
        z-index:-1;
        position:absolute;
      }

      #app {
        width: 100%;
        height: 100%;
        /*定义为一个flex盒子*/
        display: flex;
        /*内部元素按行排列*/
        flex-direction: row;
        min-width: 400px;
        min-height: 400px;
        /* 主轴居中 */
        justify-content: center;
        /* 交叉轴居中 */
        align-items: center;
      }

      form {
        width: 20%;
        box-shadow: rgba(0, 0, 0, 0.1) 0px 15px 30px;
        padding: 30px 30px;
        border-radius: 8px;
        min-width: 450px;
      }
    </style>
  </head>

  <body>
    <div id="app">
      <form style="background-color: white; opacity: 0.95;">
        <div style="text-align: center;margin-bottom:20px;">
          <img src="./view/control/assest/images/long_logo.png" style="width: 100%">
        </div>
        <div class="input-group mb-2 mr-sm-2">
          <label for="u_name">
            <div class="input-group-prepend">
              <div class="input-group-text">U</div>
            </div>
          </label>
          <input type="text" class="form-control" id="u_name" v-model="user.u_name" placeholder="请输入用户名" />
        </div>
        <div class="input-group mb-2 mr-sm-2">
          <label for="u_pwd">
            <div class="input-group-prepend">
              <div class="input-group-text">P</div>
            </div>
          </label>
          <input type="password" class="form-control" id="u_pwd" v-model="user.u_pwd" placeholder="请输入密码">
        </div>

        <div class="form-check mb-2 mr-sm-2">
          <input class="form-check-input" type="checkbox" id="inlineFormCheck">
          <label class="form-check-label" for="inlineFormCheck">
            记住我
          </label>
        </div>

        <div style="text-align: center;">
          <button type="button" class="btn btn-primary" @click="login" style="width: 100%;">登 录</button>
        </div>

        <br/>
        <p>没有账号? <a href="./view/signup.html">点此注册</a></p>
        <a href="view/forgetpwd.html">忘记密码？</a>
      </form>
    </div>

    
    <script src="js/jquery-3.6.0.slim.min.js"></script>
    <script src="js/bootstrap.bundle.min.js"></script>
    <script src="js/vue.global.js"></script>
    <script src="js/axios.min.js"></script>
    <script src="js/my-axios.js"></script>
    <script src="layer/layer.js"></script>
    <script src="js/verificationNumbers.js" tppabs="js/verificationNumbers.js"></script>
    <script src="js/Particleground.js" tppabs="js/Particleground.js"></script>

    <script>
      $(document).ready(function() {
        //粒子背景特效
        $('body').particleground({
          dotColor: '#5cbdaa',
          lineColor: '#5cbdaa'
        });
      });

        //定义vue应用配置
        const app = {
            //data函数专门用来定义数据
            data(){
                return {
                  
                  //定义登录数据
                  user:{
                    u_name: '',
                    u_pwd:'',
                    u_id: ''
                  },
                  loadIdx:null,
                  
                };
            },

            //定义方法
            methods:{
              //登录
              login(){
                //将登录数据发送至服务器
                this.loadIdx = layer.load(); // 加载提示
                myAxios.post('/login',this.user)
                       .then(res=>{
                         layer.close(this.loadIdx);
                          if(res.data.success){
                            this.user.u_id = res.data.data;
                            sessionStorage.setItem("u_id", this.user.u_id);
                            console.log(sessionStorage.getItem("u_id"));
                            layer.msg('登录成功！', {icon: 1, time: 800},()=>{
                              window.location.href = 'index_main.html';
                            });                             
                          }else{
                            layer.msg(res.data.message, {icon: 2, time: 1500});
                          }
                       })
                       .catch(err=>{
                        layer.close(this.loadIdx);
                        layer.msg('系统错误！', {icon: 2, time: 800});
                       });
                    }
            },

            //定义回调方法：mounted 该方法在页面渲染完成立即执行
            mounted(){
              
            }
        };

        Vue.createApp(app).mount('#app')

    </script>
    

   
  </body>
</html>